<template>
<swiper class="container" number='3' @change="swiperChange" >
	<swiper-item class="s_item" v-for="(item, index) in proList" :key="index">
		<view class="flex_b_c">
			<view class="item1" @click="toDetail(index)">
				<image class="img2" :src="item.thumb" mode=""></image>
				<view class="city_name" v-if="item.chain_names">{{item.chain_names.split(',')[0]||''}}</view>
				<view class="see">
					<image class="see_img" src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/see.png" mode="widthFix"></image>{{item.read_num}}
					<image class="see_img m_left" src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/fx_icon.png" mode="widthFix"></image>{{item.share_num}}
				</view>
				<view class="park_name">{{item.name}}</view>
				<view class="add">
					<view class="add_item now">
						<image class="see_img" src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/add.png" mode="widthFix"></image>{{item.city_name}}
					</view>
					<view class="now">{{item.create_time}}</view>
				</view>
			</view>
<!-- 			<view class="item1" v-if='proList[index*2+1].id'  @click="toDetail(index*2+1)"> 
				<image class="img2" :src="proList[index*2+1].imgs" mode=""></image>
				<view class="city_name" v-if="proList[index*2+1].chain_names">{{proList[index*2+1].chain_names.split(',')[0]||''}}</view>
				<view class="see">
					<image class="see_img" src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/see.png" mode="widthFix"></image>{{proList[index*2+1].read_num}}
					<image class="see_img m_left" src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/fx_icon.png" mode="widthFix"></image>{{proList[index*2+1].share_num}}
				</view>
				<view class="park_name">{{proList[index*2+1].name}}</view>
				<view class="add">
					<view class="add_item now">
						<image class="see_img" src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/4/2020/09/add.png" mode="widthFix"></image>{{proList[index*2+1].city_name}}
					</view>
					<view class="now">{{proList[index*2+1].create_time}}</view>
				</view>
			</view>
			<view class="item1" v-else>		</view> -->
		</view>
	</swiper-item>
</swiper>
</template>

<script>
	export default {
		props: {
			proList:{
				type:Array,
				default:[{chain_names:'',id:1},{chain_names:'',id:2}]
			}
		},
		name:"proList",
		data() {
			return {
				
			};
		},
		mounted() {
			let time = setInterval(()=>{
				if(this.proList.length>0){
					console.log(this.proList,Math.ceil(this.proList.length/2)+1)
					clearInterval(time)
				}
			},1000)
		},
		methods:{
			swiperChange(){
				
			},
			toDetail(index){
				uni.navigateTo({
					url:'/pages/proDetail/proDetail?id='+this.proList[index].id
				})
			}
		}
	}
</script>

<style>
.container{
	height: 175px;
}
.img2{
	height: 110px;
	width: 150px;
	border-radius: 6px;
}
.flex_b_c{
	height: 175px;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
}
.s_item{
	width: 155px !important;
	padding-left: 5px;
	margin-left: 5px;
}
.item1{
	width: 100%;
	height: 175px;
	position: relative;
}
.city_name{
	position: absolute;
	top:8px;
	left: -5px;
	padding: 5px;
	font-size: 14px;
	background: #FA6400;
	background: linear-gradient(-45deg, #FE4555 0%, #FE9E33 100%);
	border-radius: 4px;
	color: #fff;
}
.park_name{
	height: 22px;
	font-size: 16px;
	font-weight: 400;
	color: #000000;
	line-height: 22px;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	margin-top: 5px;
}
.see{
	display: flex;
	color: #fff;
	font-size: 12px;
	position: absolute;
	left: 0px;
	top: 90px;
	width: calc(100% - 21px);
	border-radius: 0 0 4px 4px;
	padding: 2px 8px;
	background-color: rgba(0,0,0,0.5);
	align-items: center;
}
.see_img{
	width: 14px;
	margin-right: 2px;
}
.m_left{
	margin-left: 10px;
}
.add{
	display: flex;
	justify-content: space-between;
	color: #999999;
	font-size: 12px;
	padding-right: 5px;
	margin-top: 5px;
	align-items: center;
}
.add_item{
	display: flex;
	align-items: center;
}
.now{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
</style>
